<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <!-- <p>用户名：<input type="text"></p>
        <p>密码：<input type="password"></p>     
        <p>性别：<select name="" id="">
            <option value="">男</option>
            <option value="">女</option>
        </select>
        </p>
        <p>爱好：
            <input type="checkbox">篮球
            <input type="checkbox">足球
            <input type="checkbox">羽毛球
            <input type="checkbox">乒乓球
            <input type="checkbox">爬山
            <input type="checkbox">购物
            <input type="checkbox">旅游
            <input type="checkbox">看美女
        </p>
        <p>是否已婚：
            <input type="radio">已婚
            <input type="radio">未婚
        </p>
        <p>简介：
            <textarea name="" id="" cols="60" rows="10"></textarea>
        </p> -->
    </div>
</body>
<script>
    var arr = [{

    label: "用户名",

    name: "username",

    type: "text"

}, {

    label: "密码",

    name: "password",

    type: "password"

}, {

    label: "性别",

    name: "gender",

    type: "select",

    value: ['男', '女', '不男', '不女', 'Gay', '妖王']

}, {

    label: "爱好",

    name: "hobby",

    type: "checkbox",

    value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

}, {

    label: '是否已婚',

    name: 'married',

    type: 'radio',

    value: ['已婚', '未婚']

},{

    label: '简介',

    name: 'resume',

    type: 'textarea'

}];
    var box = document.getElementById('box')

    arr.forEach(function(item,index){
        box.innerHTML = `
        <p>${arr[0].label}：<input type="${arr[0].type}"></p>
        <p>${arr[1].label}：<input type="${arr[1].type}"></p>     
        <p>${arr[2].label}：<${arr[2].type} name="" id="">
            <option value="">${arr[2].value[0]}</option>
            <option value="">${arr[2].value[1]}</option>
        </${arr[2].type}>
        </p>
        <p>${arr[3].label}：
            <input type="${arr[3].type}">${arr[3].value[0]}
            <input type="${arr[3].type}">${arr[3].value[1]}
            <input type="${arr[3].type}">${arr[3].value[2]}
            <input type="${arr[3].type}">${arr[3].value[3]}
            <input type="${arr[3].type}">${arr[3].value[4]}
            <input type="${arr[3].type}">${arr[3].value[5]}
            <input type="${arr[3].type}">${arr[3].value[6]}
            <input type="${arr[3].type}">${arr[3].value[7]}
        </p>
        <p>${arr[4].label}：
            <input type="${arr[4].type}">${arr[4].value[0]}
            <input type="${arr[4].type}">${arr[4].value[1]}
        </p>
        <p>${arr[5].label}：
            <${arr[5].type} name="" id="" cols="60" rows="10"></${arr[5].type}>
        </p>
        `
    })
</script>
</html>